<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <Detail title="访问量" count="￥ 12350">
            <!-- 具名插槽 -->
            <template slot="chars">
              <span>周比率&nbsp;&nbsp;56.67%<i class="el-icon-caret-top" style="color:green;font-size: 16px;"></i></span>
              <span>日同比&nbsp;&nbsp;19.96%<i class="el-icon-caret-bottom" style="color:red;font-size: 16px;"></i></span>
            </template>
            <template slot="footer">
              <span>
                日销售额: ￥12314
              </span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="支付笔数" count="88460">
            <template slot="chars">
              <lineChart></lineChart>
            </template>
            <template slot="footer">
              <span>
                日常访问量: 12314
              </span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="88460">
            <template slot="chars">
              <BarChart></BarChart>
            </template>
            <template slot="footer">
              <span>
                转换率: 64%
              </span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <Detail title="运营活动效果" count="68%">
            <template slot="chars">
              <ProgressChrts></ProgressChrts>
            </template>
            <template slot="footer">
              <span>周比率&nbsp;&nbsp;56.67%<i class="el-icon-caret-top" style="color:green;font-size: 16px;"></i></span>
              <span>日同比&nbsp;&nbsp;19.96%<i class="el-icon-caret-bottom" style="color:red;font-size: 16px;"></i></span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from './Detail'
import lineChart from './LineChart'
import BarChart from './BarChart'
import ProgressChrts from './ProgressChrts'

export default {
  components: {
    Detail,
    lineChart,
    BarChart,
    ProgressChrts
  }
}
</script>

<style>
</style>